<template>
  <div>
    <v-title></v-title>
    <div v-if="flag == true">
      <!-- 这是头部 -->
      <header>
        <!-- 这是头像和详情 -->
        <div class="conbox">
          <img :src="img" alt="" />
          <div class="content">
            <p>{{ phone }}</p>
            <span type="default">完善信息让小U更了解你吧</span
            ><button @click="remove">退出登录</button>
          </div>
        </div>

        <!-- 收藏其他的 -->
        <van-grid :border="false" :column-num="4">
          <van-grid-item>
            <p>12</p>
            我的收藏
          </van-grid-item>
          <van-grid-item>
            <p>12</p>
            浏览记录
          </van-grid-item>
          <van-grid-item>
            <p>12</p>
            我的红包
          </van-grid-item>
          <van-grid-item>
            <p>12</p>
            优惠券
          </van-grid-item>
        </van-grid>

        <!-- 我的订单 -->
        <div class="orderbox">
          <h2 @click="goorder">
            我的订单 <a href="JavaScript:;">全部订单&gt;</a>
          </h2>
          <van-grid>
            <van-grid-item icon="send-gift" text="代付款" />
            <van-grid-item icon="shop" text="代发货" />
            <van-grid-item icon="comment-circle" text="代确认" />
            <van-grid-item icon="manager" text="售后/退款" />
          </van-grid>
        </div>
      </header>

      <!-- 下面的内容 -->
      <ul class="my">
        <li>
          <van-icon name="location-o" />
          <p>地址管理 <span>></span></p>
        </li>
        <li>
          <van-icon name="location-o" />
          <p>我的钱包 <span>></span></p>
        </li>
        <li>
          <van-icon name="location-o" />
          <p>我的二维码 <span>剩余200U币></span></p>
        </li>
        <li>
          <van-icon name="location-o" />
          <p>我的小伙伴 <span>></span></p>
        </li>
        <li>
          <van-icon name="location-o" />
          <p>0元试用 <span>></span></p>
        </li>
      </ul>
    </div>

    <div v-else class="login">
      <button @click="$router.push('/login')">登录</button>
      <button @click="$router.push('/register')">注册</button>
    </div>
    <div id="ccc"></div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      // 用户头像
      img: JSON.parse(localStorage.getItem("info")).avatarurl,
      // 用户手机
      phone: JSON.parse(localStorage.getItem("info")).phone,
      flag: localStorage.getItem("info") ? true : false,
    };
  },
  methods: {
    goorder() {
      this.$router.push("/order");
    },
    remove() {
      this.$dialog
        .confirm({
          message: "确定要退出吗",
        })
        .then(() => {
          // on confirm  确定的时候

          // 退出登录  就是修改仓库中的info
          localStorage.removeItem("info");
          this.$toast("退出成功");
          this.$router.go(0)
        })
        .catch(() => {
          // on cancel  取消
        });
    },
  },
};
</script>


<style scoped>
@import "../assets/css/my.css";
</style>